<template>
    <div>

        <v-container class="ma-0 pa-0">
            <v-row align="center" justify="center">
                <v-col cols="3">
                    <v-subheader class="pa-0">类别管理</v-subheader>
                </v-col>
                <v-col cols="3">
                    <v-text-field
                            v-model="newCateName"
                            label="添加类别"
                            single-line
                            outlined
                    ></v-text-field>
                </v-col>
                <v-col cols="3">
                    <v-btn @click="addCate">
                        添加
                    </v-btn>
                </v-col>
                <v-spacer></v-spacer>
            </v-row>
            <v-row align="center" justify="center">
                <v-col>类别</v-col>
                <v-col>文章数</v-col>
                <v-col>编辑</v-col>
                <v-col>删除</v-col>
            </v-row>
            <v-row
                    v-for="(item, index) in categoryData"
                    :key="item.id"
                    align="center"
                    justify="center"
            >
                <v-col cols="3" align-self="center">
                    <v-text-field solo :label="item.cateName"
                                  :readonly="item.readOnly"
                                  :disabled="item.readOnly"
                                  v-model="newCateNameArr[index]"
                    >

                    </v-text-field>
                </v-col>
                <v-col align-self="center">{{item.articleCount}}</v-col>
                <v-col align-self="center">
                    <v-btn color="cyan" @click="editCate(index)">
                        <v-icon>mdi-pencil</v-icon>
                    </v-btn>
                    <v-btn color="cyan" @click="saveCate(index,item.cid)">
                        <v-icon>mdi-content-save</v-icon>
                    </v-btn>
                </v-col>
                <v-col align-self="center">
                    <v-btn color="error" @click="deleteCate(index)">删除</v-btn>
                </v-col>
            </v-row>
        </v-container>

    </div>
</template>

<script>
  import Vue from 'vue'

  /**
   * 类别操作的相关列表
   */
  export default {
    name: 'Catetory',
    data() {
      return {
        categoryData: [],// 从后端获取类别的相关数据
        newCateName: '',//新添加的类别名称
        newCateNameArr: [],
        test:''
      }
    },
    methods: {
      async getAllCategories() {
        try {

          const {data: res} = await this.$http.get('categories');
          if (res.errorCode == 200) {
            this.categoryData = res.data;
            // 声明一个和类别数组一样大小的数组来标识类别对应的那个文本框是否可读
            //this.readOnlyArr=new Array(this.categoryData.length).fill(false);
            for (let i = 0; i < this.categoryData.length; i++) {
              Vue.set(this.categoryData[i], 'readOnly', true);
            }
            this.newCateNameArr = new Array(this.categoryData.length).fill('');
          }
        } catch (e) {
          alert('查询文章类别失败，请重试！');
        }
      },
      /**
       * 添加新的类别，添加的时候，要先判断类别是否已经存在
       */
      async addCate() {
        if (this.newCateName.trim().length==0){
          alert("类别名称不允许为空！")
          return;
        }
        if (this.judgeCateNameExists(this.newCateName.trim())) {
          alert('类别名称已经存在，请重新输入！');
        } else {
          try{
            const {data: res} = await this.$http.post('/manager/categories', {
              cateName: this.newCateName
            })
            alert(res.message);
            // 清空输入框的内容
            this.newCateName='';
            // 重新获取类别
            this.getAllCategories();
          }catch (e) {
            console.log('11');
            console.log(e);
            alert("添加类别失败，请稍后重试！");
          }
        }
      },
      /**
       * 判断类别名是否已经存在
       */
      judgeCateNameExists(newCateName) {
        console.log(newCateName);
        let data = this.categoryData;
        for (let i = 0; i < data.length; i++) {
          if (newCateName.toUpperCase() === data[i].cateName.toUpperCase()) {
            return true;
          }
        }
        return false;
      },
      /**
       *使对应的类别名称所在的框变得可编辑
       * @param index
       */
      editCate(index) {
        Vue.set(this.categoryData[index], 'readOnly', false);
      },
      async saveCate(index,cid) {
        if (this.newCateNameArr[index].trim().length==0){
          alert("修改的类别名称不允许为空");
          return;
        }
        try{
          if (!this.judgeCateNameExists(this.newCateNameArr[index].trim())) {
            console.log("updateCateName："+this.newCateNameArr[index]+"---");
            const {data: res} = await this.$http.put('/manager/categories',{
              cid:cid,
              cateName: this.newCateNameArr[index].trim()
            })
            console.log(res);
            if (res.errorCode==200){
              alert("修改类别成功")
            }
            this.getAllCategories();

          }else {
            alert("该类别名称已经存在")
          }

        }catch (e) {
          alert("修改类名失败，请重试！")
        }


      },
      /**
       * 当类别所对应的框，失去焦点的时候触发的事件，需要把类别对应的框变成不可编辑，变成只读，并显示原来的内容
       * @param index
       */
      loseFocus(index){
       // alert("请点击保存按钮进行保存，否则你的更改将不生效！")
       // Vue.set(this.categoryData[index], 'readOnly', true);
      },
      /**
       * 删除类别
       * @param index
       */
      async deleteCate(index){
        //如果该类别对应的文章数不为空的话，不允许删除
        if (this.categoryData[index].articleCount!=0){
          alert('该类别下对应的文章数不为0，请删除相应的文章再重试');
          return;
        }
        try {
          const{data:res}= await this.$http.delete('manager/categories/'+this.categoryData[index].cid);
            if (res.errorCode==200){
              alert("删除分类成功")
              this.getAllCategories();
            } else{
              alert("删除分类失败，请重试！")
            }
        }catch (e) {
          alert(e)
        }


      }

    },
    created() {
      this.getAllCategories();
    }
  }
</script>

<style scoped>

</style>